import React from 'react';
import { connect } from 'dva';
import Modal from '../../components/Sideslip/Sideslip';
import { Card, Row, Col, Button, Select, DatePicker, message  } from 'antd';
import CalendarLocale from 'rc-calendar/lib/locale/zh_CN';


class PersonalModal extends React.Component {
  state = {
    people: ''
  }
  closeModal = () => {
    this.props.operateModal();
    this.setState({
      serviceTime: null,
      people: null
    });
  }
  submit = () => {
    if (!this.state.people) {
      message.warning('请选择服务人员');
      return;
    }
    let params = {
      fElderlyId: this.props.info.fElderlyId,
      fId: this.props.info.fId,
      fOldServiceStaffId: this.state.people
    }
    this.props.changes(params);
    this.setState({ people: null});
  }
  render() {
    return (
      <Modal visable={this.props.visable} closeModal={this.closeModal}>
        <Row>
          <p style={{fontSize: 15,fontWeight:'bold'}}>更改服务内容</p>
        </Row>
        <div style={{padding: '0px 20px'}}>
          <Row>
            <p style={{fontSize: 14,fontWeight:'bold'}}>客户基本信息</p>
          </Row>
          <Card >
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span >老人姓名:</span>
              </Col>
              <Col span={20}>
                <span >{this.props.info.fElderlyName}</span>
              </Col>
            </Row>
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span >老人电话:</span>
              </Col>
              <Col span={20}>
                <span >{this.props.info.fElderlyPhone}</span>
              </Col>
            </Row>
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span >老人年龄:</span>
              </Col>
              <Col span={20}>
                <span >{this.props.info.fAge} 岁</span>
              </Col>
            </Row>
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span style={{paddingBottom: '10px'}}>所属区域:</span>
              </Col>
              <Col span={20}>
                <span style={{paddingBottom: '10px'}}>{this.props.info.fStreetCommunity}</span>
              </Col>
            </Row>
          </Card>
        </div>
        <div style={{padding: '10px 20px'}}>
          <Row>
            <p style={{fontSize: 14,fontWeight:'bold'}}>更改服务</p>
          </Row>
          <Card >
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span >服务类型:</span>
              </Col>
              <Col span={20}>
                <span>{this.props.info.fNewServiceType}</span>
              </Col>
            </Row>
            <Row style={{paddingBottom: '10px'}}>
              <Col span={4}>
                <span >服务人员:</span>
              </Col>
              <Col span={20}>
                <Select placeholder="请选择" size="small" style={{width: 200}} value={this.state.people} onChange={(e)=>this.setState({people: e})}>
                  {this.props.servicePersons.map((data)=>{
                    return <Select.Option key={data.fId} value={data.fId}>{data.fName}</Select.Option>
                  })}
                </Select>
              </Col>
            </Row>
          </Card>
        </div>
        <Row type="flex" justify="end" style={{paddingRight: 20}}>
          <Col>
            <Button style={{marginRight: 20}} onClick={()=>this.closeModal()} >取消</Button>
            <Button type="primary" onClick={()=>this.submit()}>确认</Button>
          </Col>
        </Row>
      </Modal>
    );
  }
}

export default connect()(PersonalModal);